<template>
   <div class="box">
    <h3>全局样式与局部样式</h3>
    <p>1.全局样式定义{所有组件中的标签都会加载该样式}</p>
    <ul>
        <li>以独立样式文件定义样式，并在main.js（启动引导文件）中进行加载</li>
        <li>在任意组件中以模块化语法进行样式导入（一般不再开发中使用）</li>
        <li>在任意.vue 文件中 以无 scoped 描述的style 标签 中定义样式</li>
    </ul>
    <p>2.局部样式{.vue 组件文件中定义的样式只对当前文件的标签生效}</p>
    <ul>
        <li>.vue 文件的style标签增加scoped 属性</li>
        <ol>
            <li>.vue 文件的style标签增加scoped 属性后
            vue-loader在加载文件时会使用hash编码方式生成唯一hasCode值
            【不同文件hashCode值不一样】
                </li>
                <li>.vue文件中style标签一旦增加scoped的属性，当前文件的所有标签都会被补充一个data-v-hasCode的属性值
                   
                </li>
                <li>.vue文件中增加了scoped的属性的style内部的所有样式，都会在css选择器末尾增加一个[data-v-hasCode]属性选择器
                   
                </li>
        </ol>
    </ul>
   </div>
</template>